<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>海报设计提示词生成器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/hbdesigner.css" rel="stylesheet">
</head>
<body>
<div class="container my-4">
    <!-- 顶部区域 -->
    <div class="mb-4">
        <h2 class="fw-bold text-center mb-3">海报设计提示词生成器</h2>
        <div class="row g-3">
            <!-- 毒鸡汤区域 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">毒鸡汤文</div>
                    <div class="card-body">
                        <p id="dujitang-content" class="mb-3 text-content">点击"获取毒鸡汤"按钮获取内容...</p>
                        <div class="d-flex gap-2">
                            <button id="btn-dujitang" class="btn btn-outline-secondary">获取毒鸡汤</button>
                            <button id="btn-dujitang-refresh" class="btn btn-outline-secondary">换一换</button>
                            <button id="btn-dujitang-use" class="btn btn-primary">使用这个主题</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 正向鸡汤区域 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">正向鸡汤文</div>
                    <div class="card-body">
                        <p id="yiyan-content" class="mb-3 text-content">点击"获取正能量"按钮获取内容...</p>
                        <div class="d-flex gap-2">
                            <button id="btn-yiyan" class="btn btn-outline-success">获取正能量</button>
                            <button id="btn-yiyan-refresh" class="btn btn-outline-success">换一换</button>
                            <button id="btn-yiyan-api" class="btn btn-warning">更新接口地址</button>
                            <button id="btn-yiyan-use" class="btn btn-primary">使用这个主题</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 当前选择的主题 -->
        <div class="mt-3 p-2 bg-light rounded">
            <div class="d-flex align-items-center">
                <span class="me-2 fw-bold">当前主题：</span>
                <span id="current-theme" class="fw-semibold theme-display">尚未选择主题</span>
            </div>
        </div>
    </div>
    
    <!-- 主体区域 -->
    <div class="row">
        <!-- 左侧参数设置 -->
        <div class="col-4">
            <div class="card mb-3">
                <div class="card-header">主题设置</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="theme-input" class="form-label">自定义主题（200字以内）</label>
                        <input type="text" class="form-control" id="theme-input" maxlength="200" placeholder="请输入海报主题">
                        <div class="form-text">可根据需要修改上方主题，或直接输入新主题</div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">风格选择</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">预设风格</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="styleRadio" id="style-modern" value="现代简约" checked>
                            <label class="form-check-label" for="style-modern">现代简约（简洁、留白多、字体现代、色彩克制）</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="styleRadio" id="style-chinese" value="国风">
                            <label class="form-check-label" for="style-chinese">国风（中国传统元素、水墨风、古典字体、东方美学）</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="styleRadio" id="style-anime" value="动漫">
                            <label class="form-check-label" for="style-anime">动漫（卡通风格、色彩鲜明、线条夸张、可爱风格）</label>
                        </div>
                    </div>
                    <div class="mb-2">
                        <label for="style-other" class="form-label fw-bold">其他风格（优先使用，20字以内）</label>
                        <input type="text" class="form-control" id="style-other" maxlength="20" placeholder="如：蒸汽波、赛博朋克等">
                        <div class="form-text">填写此项后将优先使用此风格</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧提示词与操作 -->
        <div class="col-8">
            <div class="card h-100 d-flex flex-column">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>生成的提示词</span>
                    <button id="btn-generate" class="btn btn-success">生成提示词</button>
                </div>
                <div class="card-body d-flex flex-column">
                    <textarea id="prompt-textarea" class="form-control mb-3 flex-grow-1" rows="10" placeholder="点击"生成提示词"按钮生成AI绘图提示词..."></textarea>
                    <div class="d-flex gap-2 justify-content-between">
                        <div>
                            <button id="btn-copy" class="btn btn-outline-primary">复制提示词</button>
                            <span id="copy-feedback" class="ms-2 text-success" style="display:none;">已复制！</span>
                        </div>
                        <button id="btn-submit" class="btn btn-secondary">生成海报</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 主题变量
let currentTheme = '';
let dujitangText = '';
let yiyanText = '';

// 获取毒鸡汤
function fetchDujitang() {
    const dujitangContent = document.getElementById('dujitang-content');
    dujitangContent.textContent = "加载中...";
    
    fetch("https://v2.xxapi.cn/api/dujitang")
        .then(res => res.json())
        .then(result => {
            if(result.code === 200) {
                dujitangText = result.data;
                dujitangContent.textContent = dujitangText;
            } else {
                dujitangContent.textContent = "获取失败，请重试";
            }
        })
        .catch(error => {
            console.error('获取毒鸡汤错误:', error);
            dujitangContent.textContent = "网络错误，请重试";
        });
}

document.getElementById('btn-dujitang').addEventListener('click', fetchDujitang);
document.getElementById('btn-dujitang-refresh').addEventListener('click', fetchDujitang);
document.getElementById('btn-dujitang-use').addEventListener('click', function() {
    if (!dujitangText) {
        alert('请先获取毒鸡汤内容');
        return;
    }
    currentTheme = dujitangText;
    document.getElementById('theme-input').value = currentTheme;
    document.getElementById('current-theme').textContent = currentTheme;
});

// 获取正向鸡汤
function fetchYiyanApiUrl(cb) {
    const yiyanContent = document.getElementById('yiyan-content');
    yiyanContent.textContent = "更新接口地址中...";
    
    fetch("https://api.apihz.cn/getapi.php")
        .then(res => res.text())
        .then(url => {
            localStorage.setItem('yiyanapi', url);
            yiyanContent.textContent = "接口地址已更新，请点击获取按钮";
            cb && cb(url);
        })
        .catch(error => {
            console.error('获取接口地址错误:', error);
            yiyanContent.textContent = "更新接口地址失败，请重试";
        });
}

function fetchYiyan() {
    const yiyanContent = document.getElementById('yiyan-content');
    yiyanContent.textContent = "加载中...";
    
    let url = localStorage.getItem('yiyanapi');
    if(!url) {
        fetchYiyanApiUrl(fetchYiyan);
        return;
    }
    
    fetch(`${url}?id=10003954&key=17d28a080bb3741e5fabecf2a56588c7`)
        .then(res => res.json())
        .then(result => {
            console.log(result);
            if(result.code === 200) {
                yiyanText = result.msg;
                yiyanContent.textContent = yiyanText;
            } else {
                yiyanContent.textContent = "接口异常，请更新接口地址";
            }
        })
        .catch(() => {
            yiyanContent.textContent = "接口地址失效，请更新接口地址";
        });
}

document.getElementById('btn-yiyan').addEventListener('click', fetchYiyan);
document.getElementById('btn-yiyan-refresh').addEventListener('click', fetchYiyan);
document.getElementById('btn-yiyan-api').addEventListener('click', function() {
    fetchYiyanApiUrl(null);
});
document.getElementById('btn-yiyan-use').addEventListener('click', function() {
    if (!yiyanText) {
        alert('请先获取正能量内容');
        return;
    }
    currentTheme = yiyanText;
    document.getElementById('theme-input').value = currentTheme;
    document.getElementById('current-theme').textContent = currentTheme;
});

// 主题输入框同步
document.getElementById('theme-input').addEventListener('input', function() {
    currentTheme = this.value;
    document.getElementById('current-theme').textContent = currentTheme || "尚未选择主题";
});

// 风格选择
function getSelectedStyle() {
    const other = document.getElementById('style-other').value.trim();
    if(other) return other;
    
    const radios = document.getElementsByName('styleRadio');
    for(let r of radios) {
        if(r.checked) return r.value;
    }
    return '现代简约';
}

// 生成提示词
document.getElementById('btn-generate').addEventListener('click', function() {
    let theme = document.getElementById('theme-input').value.trim();
    if(!theme) {
        alert('请先输入或选择海报主题');
        return;
    }
    
    if(theme.length > 200) {
        alert('主题长度不能超过200个字符');
        return;
    }
    
    let style = getSelectedStyle();
    let prompt = `帮我写一篇关于 "${theme}" 的日记，不超过100字, 使用日常风景或活动来隐喻我的主题, 主题文字整句必须出现在用于隐喻的某个物体表面上, 风格要符合${style}的特点。`;
    
    document.getElementById('prompt-textarea').value = prompt;
});

// 复制提示词
document.getElementById('btn-copy').addEventListener('click', function() {
    let text = document.getElementById('prompt-textarea').value;
    if(!text) {
        alert('请先生成提示词');
        return;
    }
    
    navigator.clipboard.writeText(text).then(() => {
        let feedback = document.getElementById('copy-feedback');
        feedback.style.display = 'inline';
        setTimeout(() => {feedback.style.display='none';}, 1500);
    }).catch(err => {
        console.error('复制失败: ', err);
        alert('复制失败，请手动复制');
    });
});

// 页面初始化
window.addEventListener('DOMContentLoaded', function() {
    // 页面加载时自动获取一条毒鸡汤文
    fetchDujitang();
});
</script>
</body>
</html>
